import React, {Component} from 'react';
import {Row, Col, Table, Spin} from 'antd';
import '../css/searchOrderDetail.css';
import {Search,Head} from '../components/EditComponent';
import {order} from "../value";
import app from '../AppMethod';
import moment from 'moment';

class SearchOrderDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            orderData: {},
        }
    };

    columns = [
        {
            title: '商品名',
            dataIndex: 'output_detail_goods_name'
        },
        {
            title: '件数',
            dataIndex: 'output_detail_real_package'
        },
        {
            title: '散包数',
            dataIndex: 'output_detail_real_single'
        }
    ];

    render() {
        const type = this.state.orderData.output_logistics_type;
        let {output_num, output_follow_name, output_follow_phone, output_delivery_time, output_order_time, output_status, output_consumer_name, customer_phone, output_money, output_real_money} = this.state.orderData;
        let {output_logistics, output_take_time, output_take_phone, output_pick_name, output_match_package, output_match_parts, output_match_single, output_pick_time, output_pick_phone} = this.state.orderData;
        let {output_match_name, output_match_phone, output_match_time, output_send_name, output_real_package, output_send_phone, output_real_parts, car_num, car_back_time} = this.state.orderData;
        let {car_follow_name, car_follow_phone, output_take_name, output_pick_end_time, output_send_time, car_expect_time, car_customer_num, output_express_type, output_express_no} = this.state.orderData;
        let status = Number(output_status);
        let statusText = '';
        switch (status) {
            case 0:
                statusText = '待接单';
                break;
            case 1:
                statusText = '已接单';
                break;
            case 2:
                statusText = '配货中';
                break;
            case 3:
                statusText = '待对货';
                break;
            case 4:
                statusText = '待配送';
                break;
            case 5:
                statusText = '待改单';
                break;
            case 6:
                statusText = '配送中';
                break;
            case 7:
                statusText = '已完成';
                break;
        }
        if (output_money == undefined || output_money == null) {
            output_money = 0.00;
        }
        if (output_real_money == undefined || output_real_money == null) {
            output_real_money = 0.00;
        }
        let notPay = Number(output_money) - Number(output_real_money);
        return (
            <Row>
                <Row>
                    {/*<Search type="订单号" handleSearchData={(value) => this.handleSearchData(value)}/>*/}
                    <Head back="false" type="订单号" handleSearchData={(value)=>this.handleSearchData(value)} click={() => this.handleBack()}/>
                </Row>
                <Spin spinning={this.state.loading}>
                    {
                        output_num == null || output_num == undefined || output_num.length < 0 ?
                            <div style={{textAlign: 'center', marginTop: '30px'}}>暂无数据</div> :
                            <Row className="registerContent">
                                <Row className="orderInfoContainer">
                                    <Col className="orderNumber">订单号：{output_num}</Col>
                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                        className="fontStyle1">订单状态：</span><span
                                        className="fontStyle2">{statusText}</span></Col>
                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                        className="fontStyle1">物流类型：</span><span
                                        className="fontStyle2">{output_logistics}</span></Col>
                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                        className="fontStyle1">跟单人：</span><span
                                        className="fontStyle2">{output_follow_name}</span></Col>
                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                        className="fontStyle1">联系方式：</span><span
                                        className="fontStyle2">{output_follow_phone}</span></Col>
                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                        className="fontStyle1">下单日期：</span><span
                                        className="fontStyle2">{output_order_time}</span></Col>
                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                        className="fontStyle1">交货日期：</span><span
                                        className="fontStyle2">{output_delivery_time}</span></Col>
                                    <Row>
                                        <Col style={{marginTop: '10px'}} className="orderInfo" xs={24} md={24}
                                             lg={24}><span
                                            className="fontStyle1">客户名称：</span><span
                                            className="fontStyle2">{output_consumer_name}</span></Col>
                                        <Col className="orderInfo" xs={24} md={24} lg={24}><span
                                            className="fontStyle1">联系方式：</span><span
                                            className="fontStyleType">{customer_phone}</span></Col>
                                    </Row>
                                    <Row>
                                        <Col style={{marginTop: '10px'}} className="orderInfo" xs={24} md={24}
                                             lg={8}><span
                                            className="priceFontStyle1">订单金额：</span><span
                                            className="priceFontStyle2">￥{output_money}</span></Col>
                                        <Col className="orderInfo" xs={24} md={24} lg={24}><span
                                            className="acceptFontStyle1">已收款：</span><span
                                            className="acceptFontStyle2">￥{output_real_money}</span></Col>
                                        <Col className="orderInfo" xs={24} md={24} lg={24}><span
                                            className="notFontStyle1">未收款：</span><span
                                            className="notFontStyle2">￥{notPay}</span></Col>
                                    </Row>
                                </Row>
                                <Row className="orderTakingContainer">
                                    <Row className="orderTakingTitle1">
                                        接单人信息
                                    </Row>
                                    <Row className="orderTakingContent">
                                        <Col className="orderInfo" xs={24} md={12} lg={8}><span
                                            className="fontStyle1">接单人名：</span><span
                                            className="fontStyle2">{output_take_name}</span></Col>
                                        <Col className="orderInfo" xs={24} md={12} lg={8}><span
                                            className="fontStyle1">联系电话：</span><span
                                            className="fontStyle2">{output_take_phone}</span></Col>
                                        <Col className="orderInfo" xs={24} md={12} lg={8}><span
                                            className="fontStyle1">接单时间：</span><span
                                            className="fontStyle2">{output_take_time}</span></Col>
                                    </Row>
                                </Row>
                                <Row className="orderDistributionContainer">
                                    <Row className="orderTakingTitle1">
                                        配货信息
                                    </Row>
                                    <Row className="orderTakingContent">
                                        <Col className="orderInfo" xs={9} md={8} lg={6}><span
                                            className="fontStyle1">配货人：</span><span
                                            className="fontStyle2">{output_pick_name}</span></Col>
                                        <Col className="orderInfo" xs={15} md={8} lg={6}><span
                                            className="fontStyle1">联系电话：</span><span
                                            className="fontStyle2">{output_pick_phone}</span></Col>
                                        <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                            className="fontStyle1">配货开始时间：</span><span
                                            className="fontStyle2">{output_pick_time}</span></Col>
                                        <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                            className="fontStyle1">配货结束时间：</span><span
                                            className="fontStyle2">{output_pick_end_time}</span></Col>
                                        <Col className="orderInfo" xs={8} md={8} lg={6}><span
                                            className="fontStyle1">件数：</span><span
                                            className="fontStyle2">{output_match_package}</span></Col>
                                        <Col className="orderInfo" xs={8} md={8} lg={6}><span
                                            className="fontStyle1">散件数：</span><span
                                            className="fontStyle2">{output_match_parts}</span></Col>
                                        <Col className="orderInfo" xs={8} md={8} lg={6}><span
                                            className="fontStyle1">散包数：</span><span
                                            className="fontStyle2">{output_match_single}</span></Col>
                                    </Row>
                                    <Row className="orderTakingTable">
                                        <Table
                                            columns={this.columns}
                                            dataSource={this.state.orderData.output_detail}
                                            loading={this.state.loading}
                                            pagination={false}
                                            rowKey={(record, index) => index}
                                        >
                                        </Table>
                                    </Row>
                                </Row>
                                <Row className="orderMatchContainer">
                                    <Row className="orderTakingTitle1">
                                        对单人信息
                                    </Row>
                                    <Row className="orderTakingContent">
                                        <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                            className="fontStyle1">对单人名：</span><span
                                            className="fontStyle2">{output_match_name}</span></Col>
                                        <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                            className="fontStyle1">联系电话：</span><span
                                            className="fontStyle2">{output_match_phone}</span></Col>
                                        <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                            className="fontStyle1">对单时间：</span><span
                                            className="fontStyle2">{output_match_time}</span></Col>
                                    </Row>
                                </Row>
                                <Row className="orderDeliveryContainer">
                                    <Row className="orderTakingTitle1">
                                        配送信息
                                    </Row>
                                    <Row className="orderTakingContent">
                                        {
                                            type == 0 || type == 1 ? <span>
                                                <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                    className="fontStyle1">配送人名：</span><span
                                                    className="fontStyle2">{output_send_name}</span></Col>
                                                <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                    className="fontStyle1">联系电话：</span><span
                                                    className="fontStyle2">{output_send_phone}</span></Col>
                                            </span> : ''
                                        }
                                        <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                            className="fontStyle1">配送时间：</span><span
                                            className="fontStyle2">{output_send_time}</span></Col>
                                        <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                            className="fontStyle1">送货件数：</span><span
                                            className="fontStyle2">{output_real_package}</span></Col>
                                        <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                            className="fontStyle1">送货散件数：</span><span
                                            className="fontStyle2">{output_real_parts}</span></Col>
                                    </Row>
                                    <Row className="deliveryType">
                                        {
                                            type == 0 ? <Row>
                                                <Row>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">送货类型：</span><span
                                                        className="fontStyle2">{output_logistics}</span></Col>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">跟车人：</span><span
                                                        className="fontStyle2">{car_follow_name}</span></Col>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">跟车人电话：</span><span
                                                        className="fontStyle2">{car_follow_phone}</span></Col>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">车牌号：</span><span
                                                        className="fontStyle2">{car_num}</span></Col>
                                                </Row>
                                                <Row style={{marginTop: '10px'}}>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">预计到达时间：</span><span
                                                        className="fontStyle2">{car_expect_time}</span></Col>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">回来时间：</span><span
                                                        className="fontStyle2">{car_back_time}</span></Col>
                                                </Row>
                                            </Row> : ''
                                        }
                                        {
                                            type == 1 ? <Row>
                                                <Row>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">送货类型：</span><span
                                                        className="fontStyle2">{output_logistics}</span></Col>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">跟车人：</span><span
                                                        className="fontStyle2">{car_follow_name}</span></Col>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">跟车人电话：</span><span
                                                        className="fontStyle2">{car_follow_phone}</span></Col>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">客户车牌：</span><span
                                                        className="fontStyle2">{car_customer_num}</span></Col>
                                                </Row>
                                                <Row style={{marginTop: '10px'}}>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">车牌号：</span><span
                                                        className="fontStyle2">{car_num}</span></Col>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">预计到达时间：</span><span
                                                        className="fontStyle2">{car_expect_time}</span></Col>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">回来时间：</span><span
                                                        className="fontStyle2">{car_back_time}</span></Col>
                                                </Row>
                                            </Row> : ''
                                        }
                                        {
                                            type == 2 ? <Row>
                                                <Row>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">送货类型：</span><span
                                                        className="fontStyle2">{output_logistics}</span></Col>
                                                    <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                        className="fontStyle1">车牌号：</span><span
                                                        className="fontStyle2">{car_num}</span></Col>
                                                </Row>
                                                <Row style={{marginTop: '10px'}}>
                                                    <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                        className="fontStyle1">回来时间：</span><span
                                                        className="fontStyle2">{car_back_time}</span></Col>
                                                </Row>
                                            </Row> : ''
                                        }
                                        {
                                            type == 3 ? <Row>
                                                <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                    className="fontStyle1">送货类型：</span><span
                                                    className="fontStyle2">{output_logistics}</span></Col>
                                                <Col className="orderInfo" xs={12} md={8} lg={6}><span
                                                    className="fontStyle1">快递类型：</span><span
                                                    className="fontStyle2">{output_express_type}</span></Col>
                                                <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                    className="fontStyle1">快递单号：</span><span
                                                    className="fontStyle2">{output_express_no}</span></Col>
                                            </Row> : ''
                                        }
                                        {
                                            type == 4 ? <Row>
                                                <Col className="orderInfo" xs={24} md={8} lg={6}><span
                                                    className="fontStyle1">送货类型：</span><span
                                                    className="fontStyle2">{output_logistics}</span></Col>
                                            </Row> : ''
                                        }
                                    </Row>
                                </Row>
                            </Row>
                    }
                </Spin>
            </Row>
        )
    };

    /**
     * 根据订单号查询订单详情
     * @param value
     */
    handleSearchData(value) {
        this.setState({loading: true});
        app.post(order.EMPLOYEE_SEARCHOUTPUT, {output_num: value}).then((result) => {
            if (result.code === 1) {
                let data = result.data;
                data.output_createtime = data.output_createtime === null ? "" : moment(data.output_createtime).format('YYYY-MM-DD HH:mm:ss');
                data.output_order_time = data.output_order_time === null ? "" : moment(data.output_order_time).format('YYYY-MM-DD');
                data.output_delivery_time = data.output_delivery_time === null ? "" : moment(data.output_delivery_time).format('YYYY-MM-DD');
                data.output_take_time = data.output_take_time === null ? "" : moment(data.output_take_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_pick_time = data.output_pick_time === null ? "" : moment(data.output_pick_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_pick_end_time = data.output_pick_end_time === null ? "" : moment(data.output_pick_end_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_match_time = data.output_match_time === null ? "" : moment(data.output_match_time).format('YYYY-MM-DD HH:mm:ss');
                data.output_send_time = data.output_send_time === null ? "" : moment(data.output_send_time).format('YYYY-MM-DD HH:mm:ss');
                data.car_start_time = data.car_start_time === null ? "" : moment(data.car_start_time).format('YYYY-MM-DD HH:mm:ss');
                data.car_expect_time = data.car_expect_time === null ? "" : moment(data.car_expect_time).format('YYYY-MM-DD HH:mm:ss');
                data.car_back_time = data.car_back_time === null ? "" : moment(data.car_back_time).format('YYYY-MM-DD HH:mm:ss');
                if (data.output_real_money == null || data.output_real_money == undefined) {
                    data.output_real_money = "0.00";
                }
                this.setState({loading: false, orderData: data});
            } else {
                app.alert(result.msg, 'error', 3);
                this.setState({loading: false, orderData: {}});
            }
        })
    };

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    };
}

export default SearchOrderDetail;